<template>
  <div class="card-format">
    <el-row type="flex" justify="center" align="middle" style="height:100px;" :gutter="20">
      <el-col :span="10">
        <el-input v-model.trim="keyword.name" placeholder="请输入商品名">
          <template #append>
            <el-button type="primary" @click="lookup(keyword)">搜索</el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="3">
        <span class="span-text" @click="showDialog = true"> >> 高级搜索</span>
      </el-col>
    </el-row>
    <div class="type-list">
      <span class="">所有类别:</span>
      <span v-for="(v,i) in classData" ref="dom" :key="i" class="single-class" :class="{currentClass:current === i}" @click="getTypeList(v,i)">{{ v.cat_name }}</span>
    </div>

    <el-row>
      <el-col v-for="v in shopData" :key="v.id" :span="6">
        <el-card :body-style="{ padding: '0px' }" class="commodity">
          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" @click="displayDrawer(v)">
          <div style="padding: 14px;">
            <span>{{ v.good_name }}</span>
            <p>{{ v.shop_name }}</p>
            <div class="bottom clearfix">
              <time class="time">单价:500g/{{ v.original_prc }}RMB</time>
              <el-button type="text" class="button" @click="setGrounding(v)">{{ v.sts === true ? "下架" : "上架" }}</el-button>
              <el-button type="text" class="button" @click="displayDrawer(v)">编辑</el-button>
              <el-button type="text" class="button" @click="goDelete(v.id)">删除</el-button>
              <el-button type="text" class="button" @click="displayDrawer(v)">详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <drawer ref="drawer" :current-shop-data.sync="currentShopData" :show-drawer.sync="showDrawer" @edit="getData" />
    <el-dialog
      title="高级搜索"
      :visible.sync="showDialog"
      width="45%"
    >
      <el-form label-width="90px" class="demo-ruleForm">
        <el-form-item label="所属店铺" prop="shop">
          <el-input v-model="searchKey.shop" style="width:90%;" />
        </el-form-item>
        <el-form-item label="">
          <el-cascader
            style="width:90%;"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="lookup(searchKey)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getData, getClass, deleteShopList, xxxx, editData } from '@/api/goods'
import Drawer from '@/views/goodslist/components/drawer'
export default {
  components: {
    Drawer
  },
  data() {
    return {
      keyword: {
        name: ''
      },
      currentShopData: {}, // 当前商品详情数据
      shopData: {}, // 所有商品数据
      classData: [], // 分类列表
      current: 0,
      showDialog: false,
      searchKey: {
        shop: ''
      },
      showDrawer: false
    }
  },
  created() {
    this.getData()
    this.getClass()
  },
  methods: {
    // 自动点击的方法
    automatic() {
      document.querySelectorAll('.single-class')[0].click()
    },
    // 搜索
    async lookup(value) {
      const { data } = await xxxx(value)
      this.shopData = data
      this.showDialog = false
    },
    // 上架或下架
    async setGrounding(data) {
      this.$confirm(`此操作将修改该商品状态, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data.sts = !data.sts
        return editData(data)
      }).then(() => {
        this.getData()
        this.$message.success('修改成功')
      })
    },
    // 删除
    goDelete(id) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return deleteShopList(id)
      }).then(() => {
        this.getData()
        this.$message.success('删除成功')
      })
    },
    displayDrawer(data) {
      this.showDrawer = true
      this.currentShopData = { ...data }
      this.$nextTick(() => {
        this.$refs.drawer.assignment()
      })
      console.log(this.currentShopData)
    },
    async getClass() {
      const { data } = await getClass()
      var arr = data.filter(v => v.cat_level === 2)
      arr.unshift({ cat_name: '全部', cat_pid: 999 })
      this.classData = arr
      // console.log(arr, 'sdfgsdfg')
    },
    async getData() {
      // console.log(234567889876567)
      const { data } = await getData()
      this.shopData = data
      this.automatic()
      // console.log(this.shopData)
    },
    async getTypeList(value, index) {
      // console.log(value)
      this.current = index
      const { data } = await xxxx(value)
      this.shopData = data
      // console.log(data, '根据类查找')
    }
  }
}
</script>
<style lang="scss" scoped>
  .card-format{
    .el-row{
      .el-col{
        ::v-deep .el-input-group__append{
          background-color: #409eff;
          color: #fff;
          border: 2px solid #409eff;
        }
      }
      .span-text{
        color: #409eff;
      }
      }
  }
   // 图片组件样式
  .is-always-shadow{
    box-shadow:none
  }
  .commodity{
    width: 260px;
    height: 290px;
    margin-bottom: 20px;
    .image{
      width: 100%;
      height: 160px;
    }
    p{
      font-size: 13px;
    }
    .clearfix{
      font-size: 12px;
      .time{
        font-size: 11px;
      }
      .el-button{
        margin-left: 4px;
      }
    }
  }
  // 当前选中类别样式
  .currentClass{
    background-color: #409eff;
    color:#fff
  }
  // 类别选择样式组件
  .type-list{
        margin-bottom: 20px;
        font-size: 14px;
        padding-top: 15px;
        border-top: 1px solid #e4e7ed;
        margin: 20px 0;
        .single-class{
          margin:0 20px;
          display: inline-block;
          width: 55px;
          height: 30px;
          text-align:center;
          line-height: 30px;
          border-radius: 5px;

      }
    }
  // 对话框和抽屉组件样式
::v-deep .el-dialog__body{
    border-radius: 5px 5px 0 0;
    border: 1px solid rgb(212, 205, 205);
  }

</style>
